<template>
  <div class="dj-swiper">
    <!-- Swiper -->
    <div class="swiper mySwiper-dj">
      <div class="swiper-wrapper">
        <!-- 页面内容 -->
        <div class="swiper-slide item">
          <div class="i-1" v-for="i in 18" :key="i">
            <i class="iconfont icon-qinggan"></i>
            <p>情感</p>
          </div>
        </div>
        <div class="swiper-slide item">
          <div class="i-1 active" v-for="i in 18" :key="i">
            <i class="iconfont icon-qinggan"></i>
            <p>情感</p>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 左右切换按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

<script>
export default {
  name: "di-swiper",
  mounted(){
      // 初始化Swiper
      this.initSwiper();
    },
    methods:{
      initSwiper(){
        var swiper = new Swiper(".mySwiper-dj", {
          cssMode: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
          },
          mousewheel: true,
          keyboard: true,
        });
      }
    }
};
</script>

<style scoped>
/* Swiper自定义样式 */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
}
.swiper-button-prev,
.swiper-button-next {
  color: #999;
}
.swiper-pagination{
    bottom: 0;
}
/* 改变小圆点样式*/
/* 样式穿透 */
::v-deep .swiper-pagination-bullet-active {
  background-color: #c20c0c;
}
::v-deep .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 10px !important;
}
</style>
<style scoped lang="scss">
.dj-swiper {
  width: 100%;
  height: 274px;
  padding: 40px;
  box-sizing: border-box;
  // 改变Swiper的左右切换按钮的定位
  position: relative;
  .swiper {
    width: 100%;
    height: 190px;
    .item {
      color: #888;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(2, 1fr);
      align-items: center;
      justify-items: center;
      .i-1 {
        width: 70px;
        height: 70px;
        text-align: center;
        border-radius: 4px;
        i {
          font-size: 40px;
        }
        p {
          font-size: 12px;
          margin-top: 8px;
        }
      }
    // 高亮  
    .active{
        background-color: #f6f6f6;
    }
    }
  }
}
</style>